<template>
    <div class="alerttableWrapper" @mouseover="stopAutoRefresh" @mouseleave="startAutoRefresh">
      <table class="alertTable">
        <tbody>
          <tr v-for="alert in alerts" :key="alert.saTitle" :style="{color: alert.status == 0 ? 'red' : 'white' }" >
            <td>{{ alert.saTime }}</td>
            <td>{{ alert.saTitle }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { ref, onMounted, onUnmounted } from 'vue';
  
  export default {
    name: 'AlertTable',
    data() {
      return {
        alerts: [],
        intervalId: null // 用于保存定时器ID
      };
    },
    created() {
      this.getAll();
    },
    methods: {
      getAll() {
        axios.get('http://127.0.0.1:8080/alerts').then((res) => {
          this.alerts = res.data.data;
        }).catch((err) => {
          console.error(err); // 捕获错误并打印出来，方便调试
        });
      },
      startAutoRefresh() {
        if (this.intervalId === null) {
          this.intervalId = setInterval(() => {
            this.getAll();
          }, 5000); // 每隔5秒刷新数据
        }
      },
      stopAutoRefresh() {
        if (this.intervalId !== null) {
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
      }
    },
    mounted() {
      this.startAutoRefresh();
    },
    unmounted() {
      this.stopAutoRefresh();
    }
  };
  </script>
  
  <style>
  .alerttableWrapper {
    width: 100%; /* 设置表格区域的固定宽度 */
    height: 100%; /* 设置表格区域的固定高度 */
    overflow-y: scroll; /* 启用垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动 */

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    
  }
  
.alerttableWrapper::-webkit-scrollbar { 
  width: 0;  /* Safari 和 Chrome */
  height: 0; /* Safari 和 Chrome */
}
  .alertTable {
    color: white;
    width: 100%; /* 使表格宽度填满容器 */
    border-collapse: collapse;
  }
  
  .alertTable th, .alertTable td {
    padding: 8px;
    text-align: left;
  }
  
  .alertTable thead th {
    position: sticky; /* 使表头在滚动时固定 */
    top: 0;
  }
  </style>
  